<div class="header">
  <nz-page-header [nzGhost]="false">
    <nz-page-header-title>在线表格</nz-page-header-title>
    <nz-page-header-subtitle>Excel</nz-page-header-subtitle>
    <nz-page-header-extra>
      <button nz-button (click)="onExportExcel()">导出excel</button>
      <button nz-button nzDanger (click)="onDeleteData()">删除数据</button>
      <button nz-button (click)="onAddData()">新增数据</button>
      <button nz-button nzDanger (click)="onDeleteColumn()">删除列名</button>
      <button nz-button (click)="onCreateColumn()">新增列名</button>
      <button nz-button (click)="onChangeName()">修改表名</button>
      <button nz-button nzType="primary" (click)="onSaveTable()">
        保存表格
      </button>
    </nz-page-header-extra>

  </nz-page-header>
</div>
<nz-table
  class="table"
  #editRowTable
  nzBordered
  [nzFrontPagination]="false"
  nzSize="small"
  [nzData]="listOfData"
  [nzTitle]="title"
  [nzNoResult]="emptyTemplate"
  nzTableLayout="fixed"
>
  <thead>
    <tr>
      <th nzWidth="4%" *ngIf="listOfColumn.length"></th>
      <th *ngFor="let item of listOfColumn">{{ item.field }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of listOfData; let i = index">
      <ng-container>
        <td>{{ i + 1 }}</td>
        <td *ngFor="let column of listOfColumn">
          <div
            class="editable-cell"
            [hidden]="!editCache[data.id].edit"
            (click)="startEdit(data.id)"
          >
            {{ data[column.field] }}
          </div>
          <input
            type="text"
            nz-input
            [(ngModel)]="editCache[data.id].data[column.field]"
            (blur)="saveEdit(data.id)"
            *ngIf="column.type != 'date'"
          />
          <nz-date-picker [(ngModel)]="editCache[data.id].data[column.field]" *ngIf="column.type == 'date'" (ngModelChange)="saveEdit(data.id)"></nz-date-picker>
        </td>
      </ng-container>
    </tr>
  </tbody>
</nz-table>
<ng-template #emptyTemplate >
  <nz-empty
    nzNotFoundImage="simple"
    [nzNotFoundContent]="contentTpl"
    [nzNotFoundFooter]="footerTpl"
    *ngIf="!listOfData.length"
  >
    <ng-template #contentTpl>
      <span> 表格暂无数据 </span>
    </ng-template>
    <ng-template #footerTpl>
      <button nz-button nzType="primary" (click)="onCreateColumn()">
        创建列名
      </button>
      <nz-upload
      [(nzFileList)]="fileList"
      [nzBeforeUpload]="beforeUpload"
      nzAccept=".xlsx,.xls"
      style="margin-left: 12px;"
    >
      <button nz-button>
        <svg
          viewBox="64 64 896 896"
          fill="currentColor"
          width="1em"
          height="1em"
          data-icon="file-excel"
          aria-hidden="true"
        >
          <path
            d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM514.1 580.1l-61.8-102.4c-2.2-3.6-6.1-5.8-10.3-5.8h-38.4c-2.3 0-4.5.6-6.4 1.9-5.6 3.5-7.3 10.9-3.7 16.6l82.3 130.4-83.4 132.8a12.04 12.04 0 0010.2 18.4h34.5c4.2 0 8-2.2 10.2-5.7L510 664.8l62.3 101.4c2.2 3.6 6.1 5.7 10.2 5.7H620c2.3 0 4.5-.7 6.5-1.9 5.6-3.6 7.2-11 3.6-16.6l-84-130.4 85.3-132.5a12.04 12.04 0 00-10.1-18.5h-35.7c-4.2 0-8.1 2.2-10.3 5.8l-61.2 102.3z"
          ></path>
        </svg>
        <span>导入Excel</span>
      </button>
    </nz-upload>
    </ng-template>
  </nz-empty>
</ng-template>
<app-column-drawer
  #columnDrawer
  (result)="setColumn($event)"
  [columns]="listOfColumn"
></app-column-drawer>
<app-delete-column
  #deleteColumn
  (result)="setDeleteColumn($event)"
  [columns]="listOfColumn"
></app-delete-column>
<app-delete-data
  #deleteData
  (result)="setDeleteData($event)"
  [list]="listOfData"
></app-delete-data>
<app-set-name #setName (result)="onSetName($event)"></app-set-name>
